<template>
	<view class="container">
		<view class="left-bottom-sign"></view>
		<view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
		<view class="right-top-sign"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<uni-forms name="registerForm" class="register-form" :modelValue="formData" :rules="formRules" ref="registerForm" err-show-type="undertext">
				<uni-forms-item label="用户名" label-width="160upx" required name="username" >
					<uni-easyinput type="text" v-model="formData.username" placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="用户昵称" label-width="160upx" required name="nickname">
					<uni-easyinput type="text" v-model="formData.nickname" placeholder="请输入用户昵称"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="密码" required label-width="160upx" name="password">
					<uni-easyinput type="password"  v-model="formData.password" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="确认密码" label-width="160upx" required name="confirmPwd">
					<uni-easyinput type="password"  v-model="formData.confirmPwd" placeholder="请确认密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="手机号码" class="telephone-forms-item" label-width="160upx" required name="telephone">
					<uni-easyinput type="text"  v-model="formData.telephone" placeholder="请输入手机号码"></uni-easyinput>
					<button class="btn-sms" :disabled="sendMsgDisable" :class="sendMsgDisable?'btn-disable':'btn-info'" @click="sendMsg">{{ sendMsgText }}</button>
				</uni-forms-item>
				<uni-forms-item label="验证码" label-width="160upx" required name="authCode">
					<uni-easyinput type="text"  v-model="formData.authCode" placeholder="请输入短信验证码"></uni-easyinput>
				</uni-forms-item>	
				<uni-forms-item label="上传头像" label-width="160upx" required name="avatarObj">
					<uni-file-picker
						ref="avatar"
						v-model="formData.avatarObj"
						mode="grid" 
						file-mediatype="image" 
						file-extname="png,PNG,jpg,JPG" 
						:limit="1"
						 @select="selectAvatar"
						 @success="uploadAvatarSuccess"
						/>
				</uni-forms-item>
				<uni-forms-item label="性别" label-width="160upx" required name="gender">
					<radio-group @change="radioChange">
						<view class="radio-item">
							<radio value="1" :checked="formData.gender=='1'"/><label>男</label>
						</view>
						<view class="radio-item">
							<radio value="0" :checked="formData.gender=='0'"/><label>女</label>
						</view>
					</radio-group>
				</uni-forms-item>
				<uni-forms-item label="出生日期" label-width="160upx" class="date-picker" required name="birthday">
					<picker mode="date" :value="formData.birthday.value" start="1970-01-01" end="2023-12-31" @change="birthdayChange">
						<view class="text">{{ formData.birthday.value }}</view>
					</picker>
				</uni-forms-item>
				<uni-forms-item label="城市" label-width="160upx" required name="city">
					<uni-data-select v-model="formData.city" :localdata="cityData" @change="cityChange">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="职业" label-width="160upx" required name="job">
					<uni-data-select v-model="formData.job" :localdata="jobData" @change="jobChange">
					</uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="个性签名" label-width="160upx" name="personalizedSignature">
					<uni-easyinput type="text" v-model="formData.personalizedSignature" placeholder="请输入个性签名"></uni-easyinput>
				</uni-forms-item>
				<view class="button-line">
					<button class="btn-submit" @click="submitRegInfo">提交</button>
					<button class="btn-reset">重置</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	import {getAuthCode, memberRegister} from '@/api/member'
	export default {
		data() {
			return {
				sendMsgText: '获取验证码',
				sendMsgDisable: false,
				telephoneRegex: /^1[3-9]\d{9}$/,
				formData: {
					username: null,
					nickname: null,
					password: null,
					conformPwd: null,
					telephone: null,
					authCode: '',
					avatarObj: {
						name: '',
						extname: '',
						url: ''
					},
					gender: '1',
					birthday: {
						value: '1990-12-10'
					},
					city: '08',
					cityName: '深圳市',
					job: '04',
					jobName: '程序员',
					personalizedSignature: '天道酬勤，我命由我不由天!'
				},
				cityData: [{
					value: '01', text: '北京市'
				},{
					value: '02', text: '上海市'
				},{
					value: '03', text: '天津市'
				},{
					value: '04', text: '杭州市'
				},{
					value: '05', text: '武汉市'
				},{
					value: '06', text: '长沙市'
				}, {
					value: '07', text: '广州市'
				}, {
					value: '08', text: '深圳市'
				}],
				jobData: [
					{
						value: '01', text: '公务员'
					},
					{
						value: '02', text: '银行白领'
					},
					{
						value: '03', text: '前台行政'
					},
					{
						value: '04', text: '程序员'
					},
					{
						value: '05', text: '测试'
					},
					{
						value: '06', text: '销售'
					},
					{
						value: '07', text: '制造业普工'
					},
					{
						value: '08', text: '厨师'
					},
					{
						value: '09', text: '医生'
					},
					{
						value: '10', text: '护士'
					},
					{
						value: '11', text: '学生'
					}
				],
				formRules: {
					username: {
						rules: [
							{
								required: true,
								errorMessage: '用户名不能为空'
							},
							{
								pattern: /^[A-Za-z]{1,10}[A-Za-z0-9_]{1,20}$/,
								errorMessage: '用户名必须以字母开头,只能包含字母、数字和下划线'
							},
							{
								minLength: 6,
								maxLength: 20,
								errorMessage: '用户名长度必须介于6-20位之间'
							}
						]
					},
					nickname: {
						rules: [
							{
								required: true,
								errorMessage: '用户名不能为空'
							},
							{
								minLength: 2,
								maxLength: 20,
								errorMessage: '用昵称长度必须介于2-20位之间'
							}
						]
					},
					password: {
						rules: [
							{
								required: true,
								errorMessage: '密码不能为空'
							},
							{
								minLength: 8,
								maxLength: 20,
								errorMessage: '密码长度必须在8-20位之间'
							},
							{
								pattern: /^([A-Z]{1,10}[a-z]{1,10}|[a-z]{1,10}[A-Z]{1,10})([0-9]{1,8}[~!@#$%^&*?]{1,4}|[~!@#$%^&*?]{1,4}[0-9]{1,8})$/,
								errorMessage: '密码不合规'
							}
						]
					},
					confirmPwd: {
						rules: [
							{
								required: true,
								errorMessage: '确认密码不能为空'
							},
							{
								validateFunction: function(rule,value,data,callback){
									if(value!=data.password){
										callback('两次输入的密码不一致')
									}
									return true
								}
							}
						]
					},
					telephone: {
						rules: [
							{
								required: true,
								errorMessage: '手机号码不能为空'
							},
							{
								pattern: /^1[3-9]\d{9}$/,
								errorMessage: '无效的手机号码'
							}
						]
					},
					authCode: {
						rules: [
							{
								required: true,
								errorMessage: '手机验证码不能为空'
							},
							{
								pattern: /^\d{6}$/,
								errorMessage: '手机验证码必须是6位数字'
							}
						]
					},
					gender: {
						rules: [
							{
								required: true,
								errorMessage: '性别不能为空'
							},
							{
								range: ['0','1'],
								errorMessage: '性别有误'
							}
						]
					},
					city: {
						rules: [
							{
								required: true,
								errorMessage: '城市不能为空'
							}
						]
					},
					job: {
						rules: [
							{
								required: true,
								errorMessage: '职业不能为空'
							}
						]
					}
				}
			}
		},
		onLoad() {
		},
		methods: {
			navBack() {
				uni.navigateBack();
			},
			sendMsg(){
				var telephone = this.formData.telephone
				if(telephone==null || telephone==''){
					uni.showToast({
						title: '手机号码不能为空',
						mask: false,
						duration: 1500,
						position: 'center'
					})
					return
				}
				if(!this.telephoneRegex.test(telephone)){
					uni.showToast({
						title: '请输入有效的手机号码',
						mask: false,
						duration: 1500,
						position: 'center'
					})
					return
				}
				var param = {
					telephone: telephone,
					type: '02'
				}
				getAuthCode(param).then(res=>{
					uni.showToast({
						title: '手机验证码发生成功!',
						mask: false,
						duration: 1500,
						position: 'center'
					})
					this.sendMsgDisable = true
					var time = 60
					var timeFunc = setInterval(()=>{
						if(time==0){
							this.sendMsgDisable = false
							this.sendMsgText = '获取验证码'
							clearInterval(timeFunc)
						} else {
							time--
							this.sendMsgText = time + 's后获取验证码'
						}
					}, 1000)
				})
			},
			selectAvatar(item){
				console.log(item)
				var file = item.tempFiles[0].file
				this.formData.avatarObj.extname = item.tempFiles[0].extname
				const xhr = new XMLHttpRequest()
				xhr.open('POST', 'http://localhost:8201/mall-portal/sso/uploadAvatar', true)
				var self = this
				xhr.onreadystatechange = function () {
				     if (xhr.readyState === 4 && xhr.status === 200) {
						const response = JSON.parse(xhr.response)
						if(response.code===200){
							console.log('上传成功')
							self.formData.avatarObj.name = response.data.name
							self.formData.avatarObj.url = response.data.url
						}else{
							console.error(response.message)
							uni.showToast({
								title:'上传头像失败',
								icon:'error',
								position: 'center'
							})
						}
				     }
				}
				const formData = new FormData();
				formData.append('file', file);
				xhr.send(formData);
			},
			uploadAvatarSuccess(item){
				console.log(item)
			},
			radioChange(event){
				console.log(event)
				this.formData.gender = event.detail.value
			},
			birthdayChange(event){
				console.log(event)
				this.formData.birthday.value=event.detail.value
			},
			cityChange(value){
				console.log(value)
				for(var i=0;i<this.cityData.length;i++){
					if(value==this.cityData[i].value){
						this.formData.cityName = this.cityData[i].text
						break
					}
				}
				
			},
			jobChange(value){
				console.log(value)
				for(var i=0;i<this.jobData.length;i++){
					if(value==this.jobData[i].value){
						this.formData.jobName = this.jobData[i].text
						break
					}
				}
			},
			submitRegInfo(){
				var self = this
				console.log(this.formData)
				this.$refs.registerForm.validate().then(res=>{
					console.log(res)
					if(!self.formData.avatarObj.url){
						uni.showToast({
							title:'未上传头像',
							icon:'error',
							position: 'center'
						})
						return
					}
					var deviceType = uni.getDeviceInfo()
					var sourceType = null
					if(deviceType==='pc'){
						sourceType = 1
					}else if(deviceType==='pad'){
						sourceType = 2
					} else {
						sourceType = 3
					}
					var param = {
						username: self.formData.username,
						nickname: self.formData.nickname,
						password: self.formData.password,
						phone: self.formData.telephone,
						authCode: self.formData.authCode,
						icon: self.formData.avatarObj.url,
						gender: self.formData.gender,
						birthday: self.formData.birthday.value,
						city: self.formData.cityName,
						job: self.formData.jobName,
						personalizedSignature: self.formData.personalizedSignature,
						sourceType: sourceType
					}
					console.log(param)
					memberRegister(param).then(response=>{
						uni.showToast({
							title: '注册会员成功',
							icon: 'success',
							position: 'center'
						})
					})
				}).catch(err=>{
					console.error(err)
					uni.showToast({
						title:'表单数据有误,请重新填写',
						icon:'error',
						position: 'center'
					})
				})
			}
		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}
	
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;
	
		image {
			width: 420upx;
			height: 420upx;
			margin-bottom: 30upx;
		}
		.empty-tips {
			display: flex;
			font-size: $font-sm+16upx;
			color: $font-color-disabled;
		
			.navigator {
				color: $uni-color-primary;
				margin-left: 0upx;
			}
		}
	}

	.container {
		padding-top: 115px;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: auto;
		overflow-y: scroll;
		/* min-width: 375px;
		max-width: 1024px; */
		position: center;
		background: #fff;
		padding-left: 30upx;
		padding-right:30upx;
		border: solid 1px #ccc;
		border-radius: 10upx;
		box-shadow: 0upx 8upx 8upx RGBA(0,0,0,0.25);
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-bottom: 40upx;
		height: 90vh;
		.uni-forms{
			.uni-forms-item.is-direction-left{
				.uni-forms-item__label{
					font-size: 18upx;
				}
			}
		}
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color: $font-color-dark;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}
	.uni-forms-item__content > uni-radio-group{
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		.radio-item:last-child{
			margin-left: 40upx;
		}
	}
	.uni-forms-item__content{
		uni-picker{
			height: 24px;
			padding-top: 5px;
			padding-left: 10px;
			border: solid 1px #ccc;
			border-radius: 5px;
		}
	}
	.uni-forms-item.telephone-forms-item.is-direction-left {
		.uni-forms-item__content {
			.btn-sms{
				height: 35px;
				line-height: 35px;
				font-size: 18upx;
				margin-left:10upx;
			}
			.btn-info{
				background-color: rgb(0,122,255);
				color: #fff;
			}
			.btn-disable{
				background-color: #ccc;
				color: #000;
			}
		}
	}
	.button-line{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		uni-button{
			height: 50px;
			line-height: 50px;
			font-size: 24upx;
			font-weight: 600;
		}
		.btn-submit{
			width:40%;
			background-color: rgb(0, 122, 255);
			color:#fff;
		}
		.btn-reset{
			width:40%;
			background-color: #ccc;
			color:#fff;
		}
	}
</style>
